<template>
    <view class="u-swiper" :style="{
			backgroundColor: bgColor,
			height: $u.addUnit(height),
			borderRadius: $u.addUnit(radius)
		}">
        
        <swiper class="u-swiper__wrapper"  @change="change" :circular="circular" :interval="interval" :duration="duration" :autoplay="autoplay"
            :current="current" :currentItemId="currentItemId" :previousMargin="$u.addUnit(previousMargin)"
            :nextMargin="$u.addUnit(nextMargin)" :acceleration="acceleration"
            :displayMultipleItems="displayMultipleItems" :easingFunction="easingFunction">
            <swiper-item class="u-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
                <view class="u-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
                    <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
					<image class="u-swiper__wrapper__item__wrapper__image1" v-if="getItemType(item) === 'image'"
					          :mode="imgMode" :style="{
								  borderRadius: $u.addUnit(radius),
					           backgroundImage: `url(${getSource(item)})`
					         }"></image>
                    <image class="u-swiper__wrapper__item__wrapper__image" v-if="getItemType(item) === 'image'"
                             :src="getSource(item)" :mode="imgMode" @tap="clickHandler(index)" 
                             :style="{
                               borderRadius: $u.addUnit(radius)
                             }"></image>
					
					
                    <video class="u-swiper__wrapper__item__wrapper__video" v-if="getItemType(item) === 'video'"
                        :id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)"
                        :poster="getPoster(item)"
                        :title="showTitle && $u.test.object(item) && item.adname ? item.adname : ''" :style="{
							height: $u.addUnit(height)
						}" controls @tap="clickHandler(index)"></video>

                    <text v-if="showTitle && $u.test.object(item) && item.adname && $u.test.image(getSource(item))"
                        class="u-swiper__wrapper__item__wrapper__title" :style="{
                               borderRadius: '0 0 ' + $u.addUnit(radius) + ' ' + $u.addUnit(radius)
                             }">{{ item.adname }}</text>
                    <text
                        class="u-swiper1__wrapper__item__wrapper__title u-line-1">广告</text>
                </view>
            </swiper-item>
        </swiper>
        <view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
            <slot name="indicator">
                <u-swiper-indicator v-if="!loading && indicator && !showTitle"
                    :indicatorActiveColor="indicatorActiveColor" :indicatorInactiveColor="indicatorInactiveColor"
                    :length="list.length" :current="currentIndex" :indicatorMode="indicatorMode"></u-swiper-indicator>
            </slot>
        </view>
    </view>
</template>

<script>
    import props from './props.js';
    /**
     * Swiper 轮播图
     * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
     * @tutorial https://www.uviewui.com/components/swiper.html
     * @property {Array}			list					轮播图数据
     * @property {Boolean}			indicator				是否显示面板指示器（默认 false ）
     * @property {String}			indicatorActiveColor	指示器非激活颜色（默认 '#FFFFFF' ）
     * @property {String}			indicatorInactiveColor	指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
     * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
     * @property {String}			indicatorMode			指示器模式（默认 'line' ）
     * @property {Boolean}			autoplay				是否自动切换（默认 true ）
     * @property {String | Number}	current					当前所在滑块的 index（默认 0 ）
     * @property {String}			currentItemId			当前所在滑块的 item-id ，不能与 current 被同时指定
     * @property {String | Number}	interval				滑块自动切换时间间隔（ms）（默认 3000 ）
     * @property {String | Number}	duration				滑块切换过程所需时间（ms）（默认 300 ）
     * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 false ）
     * @property {String | Number}	previousMargin			前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
     * @property {String | Number}	nextMargin				后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
     * @property {Boolean}			acceleration			当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
     * @property {Number}			displayMultipleItems	同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
     * @property {String}			easingFunction			指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
     * @property {String}			keyName					list数组中指定对象的目标属性名（默认 'url' ）
     * @property {String}			imgMode					图片的裁剪模式（默认 'aspectFill' ）
     * @property {String | Number}	height					组件高度（默认 130 ）
     * @property {String}			bgColor					背景颜色（默认 	'#f3f4f6' ）
     * @property {String | Number}	radius					组件圆角，数值或带单位的字符串（默认 4 ）
     * @property {Boolean}			loading					是否加载中（默认 false ）
     * @property {Boolean}			showTitle				是否显示标题，要求数组对象中有title属性（默认 false ）
     * @event {Function(index)}	click	点击轮播图时触发	index：点击了第几张图片，从0开始
     * @event {Function(index)}	change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始
     * @example	<u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
     */
    export default {
        name: 'u-swiper',
        mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
        data() {
            return {
                currentIndex: 0,
            }
        },
        watch: {
            current(val, preVal) {
                if (val === preVal) return;
                this.currentIndex = val; // 和上游数据关联上
            }
        },
        computed: {
            itemStyle() {
                return index => {
                    const style = {}
                    // #ifndef APP-NVUE || MP-TOUTIAO
                    // 左右流出空间的写法不支持nvue和头条
                    // 只有配置了此二值，才加上对应的圆角，以及缩放
                    
                    // #endif
                    return style
                }
            },
        },
        methods: {
            getItemType(item) {
                if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
                if (typeof item === 'object' && this.keyName) {
                    if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
                    if (item.type === 'image') return 'image'
                    if (item.type === 'video') return 'video'
                    return 'image'
                }
            },
            // 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
            getSource(item) {
                if (typeof item === 'string') return item
                if (typeof item === 'object' && this.keyName) return item[this.keyName]
                else uni.$u.error('请按格式传递列表参数')
                return ''
            },
            // 轮播切换事件
            change(e) {
                // 当前的激活索引
                const {
                    current
                } = e.detail
                this.pauseVideo(this.currentIndex)
                this.currentIndex = current
                this.$emit('change', e.detail)
            },
            // 切换轮播时，暂停视频播放
            pauseVideo(index) {
                const lastItem = this.getSource(this.list[index])
                if (uni.$u.test.video(lastItem)) {
                    // 当视频隐藏时，暂停播放
                    const video = uni.createVideoContext(`video-${index}`, this)
                    video.pause()
                }
            },
            // 当一个轮播item为视频时，获取它的视频海报
            getPoster(item) {
                return typeof item === 'object' && item.poster ? item.poster : ''
            },
            // 点击某个item
            clickHandler(index) {
                this.$emit('click', index)
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../libs/css/components.scss";

    .u-swiper {
        @include flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        &__wrapper {
			
            flex: 1;
			
            &__item {
                flex: 1;
				
                &__wrapper {
					padding: 5px 10px 0 10px;
                    @include flex;
                    position: relative;
                    overflow: hidden;
                    transition: transform 0.3s;
                    flex: 1;
					
					// align-items: center;
                    &__image {
						height: 90%;
                        flex: 1;
                        background-color: #dddddd;
						position: relative;
						box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
						
                    }
					&__image1{
						  position: absolute;
						  bottom: 10px;
						  left: 5%;
						  right: 5%;
						  height: 50%;
						  width: 90%;						  
						  justify-content: center;
						  filter: blur(4px);
					}
                    &__loading {
                    	position: absolute;
                    	top: 0;
                    	left: 0;
                    	width: 100%;
                    	height: 100%;
                    	@include flex;
                        border-radius: 28rpx;
                    	align-items: center;
                    	justify-content: center;
                    	background-color: #dddddd;
                    	color: #fff;
                    	font-size: 66px;
                    }
                    &__video {
                        flex: 1;
                    }

                    &__title {
						margin: 0 10px;
                        position: absolute;
                        background-color: rgba(0, 0, 0, 0.3);						
                        bottom: 14px;
                        left: 0;
                        right: 0;
						overflow: hidden;
						  white-space: nowrap;
						  text-overflow: ellipsis;
                        font-size: 28rpx;
                        padding: 6px 40px 6px 12px;					
                        color: #FFFFFF;
                        flex: 1;
                    }
                }
            }
        }

        &__indicator {
            position: absolute;
            bottom: 30px;
        }
    }

    .u-swiper1 {
        @include flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;

        &__wrapper {
            flex: 1;

            &__item {
                flex: 1;

                &__wrapper {
    	               @include flex;
                    position: relative;
                    overflow: hidden;
                    transition: transform 0.3s;
                    flex: 1;

                    &__image {
                        flex: 1;
                    }
					&__image1{
						  position: absolute;
						  bottom: 10px;
						  left: 5%;
						  right: 5%;
						  height: 100%;
						  width: 90%;						  
						  justify-content: center;
						  filter: blur(4px);
					}
                    &__video {
                        flex: 1;
                    }

                    &__title {
                        margin: 15rpx;
                        position: absolute;
                        background-color: rgba(0, 0, 0, 0.0);
                        bottom: 13px;
                        border: #FFFFFF 1px solid;
                        left: 1;
                        right: 10px;
                        font-size: 15rpx;
                        border-radius: 10rpx;
                        padding: 5rpx;						
                        color: #FFFFFF;
                        flex: 1;
                    }
                }
    
       }
        }

        &__indicator {
            position: absolute;
            bottom: 10px;
        }
    }
</style>
